import _ from 'lodash-es'
import { Button } from 'antd'
import { ReactComponent as ErrorImg } from '@/assets/images/error.svg'
import { useRouteError, useNavigate } from 'react-router-dom'

export const ErrorPage = () => {
  const err = useRouteError();
  const navigate = useNavigate();

  return (
    <div className='flex items-center w-full h-full justify-center'>
      <div className='flex w-[600px] h-[500px] flex-col items-center'>
        <h1>抱歉！发生了个错误！</h1>
        <ErrorImg />
        <p>{_.get(err, 'message', '')}</p>
        <Button type='primary' onClick={() => navigate('/')}>回到首页</Button>
      </div>
    </div>
  )
}

export default ErrorPage